<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件-一个重要的内置关系</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
     -->
    
    <div id="root">
        <school></school>
    </div>

</body>
<script type="text/javascript">

    Vue.prototype.x = 99

     //定义school组件
     const school = Vue.extend({
        name:'school',
        template:`
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{schoolAddress}}</h2>
            <button @click="showX">点我输出x</button>
        </div>
        `,
        data(){
            return {
                schoolName:'国防科技大学',
                schoolAddress:'中国'
            }
        },
        methods: {
            showX(){
                console.log(this.x)
            }
        }
    })
    
    new Vue({
        el:'#root',
        data:{
            msg:'你好'
        },
        components:{school},
    })

    console.log(school.prototype.__proto__ === Vue.prototype);

    //定义一个构造函数
    // function Demo() {
    //     this.a = 1
    //     this.b = 2
    // }
    // //创建一个Demo的实例对象
    // const d = new Demo()

    // console.log(Demo.prototype);//显示原型属性
    // console.log(d.__proto__);//隐式原型属性
    // console.log(Demo.prototype === d.__proto__);

    // //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    // Demo.prototype.x = 99

    // console.log('@', d);

</script>

</html>